<template>
  <div class="notice-contail">
    <van-nav-bar class="header"
                 title="物业缴费"
                 left-arrow
                 @click-left="goBack()"
                 right-text="缴费记录"
                 @click-right="goPage('/estate/oldList')" />
    <div class="weaper">
      <van-cell-group class="fengniao-content">
        <van-cell :title="`${userInfo.ownName} | ${userInfo.communityName}`"
                  :label="address">
        </van-cell>
      </van-cell-group>
      <van-cell-group class="fengniao-content list">
        <van-cell :title="item.title"
                  v-for="(item,index) in menuList"
                  :key="index"
                  :label="item.label"
                  :isLink="item.isLink"
                  @click="goLink(item)">
          <van-icon name="location"
                    :style="loadStyle(item.color)"
                    slot="icon"
                    class="icon"></van-icon>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import baseCommon from '@/mixins/common';
import { mapGetters } from 'vuex';

export default {
  name: 'estate',
  mixins: [baseCommon()],
  data () {
    return {
      menuDataList: [],
      menuList: [
        {
          title: '物业费',
          color: '#FFB800',
          icon: 'location',
          isLink: true,
          event: 'detail',
          label: '小区的物业费缴费',
          query: {
            type: 0,
          },
        }, {
          title: '水电费',
          color: '#01AAED',
          icon: 'location',
          isLink: true,
          label: '小区的水电费缴费',
          query: {
            type: 1,
          },
        }, {
          title: '电费',
          color: '#5FB878',
          icon: 'location',
          isLink: true,
          label: '小区的电费缴费',
          query: {
            type: 2,
          },
        },
      ],
    };
  },
  computed: {
    ...mapGetters(['userInfo', 'address']),
  },
  created () { },
  mounted () { },
  methods: {
    loadStyle (color) {
      return {
        color,
        borderStyle: color,
      };
    },
    detail (item) {
      this.$router.push({ path: '/pay', query: item.query });
    },
  },
};
</script>

<style lang="scss" scoped>
.notice-contail {
  .list {
    .van-cell {
      display: flex;
      align-items: center;
    }
    .icon {
      margin-top: 6px;
      margin-right: 15px;
      padding: 0 10px 0 0;
      font-size: 32px;
      border-width: 0;
      border-right-width: 1px;
      border-style: solid;
    }
  }
}
</style>

